import QtQuick 1.0

/*
 List of word lists... aka vocabulary selection
*/
Item {
    id: vocabularySelectionView

    ListView {
        id: vocabularyList
        x: 18
        y: 75
        width: 331
        height: 478
        model: vocabularyListModel
        delegate: vocabularyListDelegate
        spacing: 10
        clip: true
    }

    ListModel {
        id: vocabularyListModel
        property int numberOfWords: 0

        ListElement { word: "Business"; url: "businsess.xml" }
        ListElement { word: "Technology"; url: "technology.xml" }
        ListElement { word: "Design"; url: "design.xml" }
    }

    Component {
        id: vocabularyListDelegate

        BorderImage{id:selVocab
            height: 83
            width: parent.width-20
            opacity:  0.85
            source: mouseArea.pressed ? "qrc:/rectYellow" :"qrc:/rectGreen"
            border { left: 5; top: 5; right: 5; bottom: 5 }
            horizontalTileMode: BorderImage.Repeat
            verticalTileMode: BorderImage.Repeat
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
                text: word
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 24
                anchors.centerIn: parent
                color: "white"

            }
            MouseArea{id:mouseArea

                anchors.fill: parent
                onClicked:{
                    wordSelectionView.wordListUrl = url
                    wordSelectionView.getWords()
                    screen.state = "wordSelectionView"
                }

            }}

        }
}
